import React from 'react';
import classnames from 'classnames';
import {Row, Col, Card, Icon} from 'antd';
import CountUp from 'react-countup';
import styles from './InfoCard.less';

class InfoCard extends React.Component {

  render() {
    const {infos} = this.props;

    return (
      <Row gutter={24}>
        {infos.map((v, k) => {
          return (
            <Col xs={24} sm={24} md={12} lg={6} xl={6} key={k}>
              <Card
                bordered={false}
                hoverable
              >
                <div className={styles.infoCard}>
                  <div className={classnames(styles.cardHeader, styles[v.color])}>
                    <h4><Icon type={v.icon}/></h4>
                  </div>
                  <div className={styles.cardContent}>
                    <p className={styles.category}>{v.title}</p>
                    <h3>
                      <CountUp
                        start={0}
                        end={v.number}
                        duration={2.75}
                        useEasing
                        useGrouping
                        separator=","
                      />
                    </h3>
                  </div>
                  <div className={styles.cardFooter}>
                    <Icon type={v.subIcon}/>
                    {' '}{v.sub}
                  </div>
                </div>
              </Card>
            </Col>
          )
        })}
      </Row>
    );
  }
}

InfoCard.propTypes = {};

export default InfoCard;
